import { memo, useState } from 'react'

// 使用 memo 包装 Child 组件，使其在 props 没有改变的情况下跳过渲染
const MemoChild = memo(function Child(params) {
	console.log('子组件组件更新了', params.num1)
	return <div>Child</div>
})

function ReactMemo() {
	console.log('渲染了')
	const [num1, setNum] = useState(0)
	const [num2, setNum2] = useState(0)

	return (
		<>
			<h2>
				React.memo: 允许组件在 props 没有改变的情况下跳过渲染（React 默认渲染机制是父组件渲染，子组件也会重新渲染）
			</h2>
			<hr />
			<MemoChild num1={num1} />
			<button onClick={() => setNum(num1 + 1)}>改变 num1（因为props改变，子组件所以会重新渲染）</button>
			<button onClick={() => setNum2(num2 + 1)}>改变 num2（因为props没有改变，子组件所以不会重新渲染）</button>
		</>
	)
}

export default ReactMemo
